<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>
      <v-layout md12 row>
        <v-flex md2 sm1>
          <v-text-field mask="######" name="lftid" label="业务员ID" v-model="queryForm.lftid" counter="6" type="number" maxLength="6"></v-text-field>
        </v-flex>
        <v-flex md2 sm1>
          <v-text-field name="nickname" label="姓名" v-model="queryForm.realName"></v-text-field>
        </v-flex>
        <v-flex md2 sm1>
          <v-text-field name="superId" label="电话" v-model="queryForm.telphone" type="number"></v-text-field>
        </v-flex>
        <v-flex md2 sm1>
          <v-text-field mask="######" name="superId" label="上级ID" v-model="queryForm.superId" counter="6" type="number"></v-text-field>
        </v-flex>
        <v-flex md2>
          <v-select :items="levelItems" v-model="queryForm.saleLevel"></v-select>
        </v-flex>
        <v-flex md2 sm1>
          <v-btn @click="search" dark color="blue" class="mt-2">
            <v-icon>search</v-icon>
            <span class="pl-2 subheading">搜索</span>
          </v-btn>
        </v-flex>
      </v-layout>
      <v-flex md12>
        <v-btn round @click="add" dark color="cyan">
          <v-icon>add</v-icon>
          <span class="pl-2 subheading">新增业务员</span>
        </v-btn>
      </v-flex>
      <v-flex md12>
        <!-- 查询数据表格 -->
        <v-data-table :loading="false" :headers="headers" :items="tableData" hide-actions class="elevation-1">
          <v-progress-linear slot="progress" color="teal" height="5" v-if="showProgress" indeterminate></v-progress-linear>
          <template slot="items" slot-scope="props">
            <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
            <td class="text-xs-center subheading">{{ props.item.saleLevel | SalesLevel }}</td>
            <td class="text-xs-center subheading">{{ props.item.realName }}</td>
            <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
            <td class="text-xs-center subheading">{{ props.item.telphone }}</td>
            <td class="text-xs-center subheading">{{ props.item.superId }}</td>
            <td class="text-xs-center">
              <v-btn flat round dark color="green" class="mx-1" @click="edit(props.item)">
                <span class="mx-1">编辑</span>
                <v-icon color="green">edit</v-icon>
              </v-btn>
              <v-btn flat round dark color="red" class="mx-1" @click="del(props.item)">
                <span class="mx-1">移除</span>
                <v-icon color="red">delete</v-icon>
              </v-btn>
            </td>
          </template>
          <!-- 没有数据时显示的提示 -->
          <template slot="no-data">
            <div class="text-md-center">
              <v-icon color="yellow darken-3">warning</v-icon>
              <span class="subheading">暂无数据</span>
            </div>
          </template>
        </v-data-table>
        <!-- 表格显示分页 -->
        <div class="text-xs-center my-2">
          <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
        </div>
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-layout wrap column class="px-4">
            <v-flex md8>
              <v-text-field prepend-icon="account_circle" label="业务员ID" v-model="editedItem.lftid"></v-text-field>
            </v-flex>
            <v-flex md12>
              <v-text-field prepend-icon="face" label="姓名" v-model="editedItem.realName"></v-text-field>
            </v-flex>
            <v-flex md8>
              <v-select :items="levelItems" v-model="editedItem.saleLevel"></v-select>
            </v-flex>
            <v-flex md12>
              <v-text-field prepend-icon="call" label="电话号码" v-model="editedItem.telphone"></v-text-field>
            </v-flex>
            <v-flex md12>
              <v-text-field maxLength="6" prepend-icon="group" label="直属上级ID" v-model="editedItem.superId"></v-text-field>
            </v-flex>
            <v-flex md12>
              <v-text-field prepend-icon="horizontal_split" label="代理追溯深度" v-model="editedItem.deep"></v-text-field>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="confirmDialog">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">注意!</v-card-title>
        <v-card-text class="title">{{modalText}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="confirmModel">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import * as salesman from "../../api/salesman";
import { mapMutations } from "vuex";
export default {
  data: () => ({
    dialog: false,
    showProgress: true,
    modal: false,
    limit: 10,
    offset: 0,
    pagination: {
      page: 1,
      pageCount: 2,
      totalVisible: 7
    },
    queryForm: {
      lftid: "",
      realName: "",
      telphone: "",
      superId: "",
      saleLevel: 1
    },
    SalesmanType: 1,
    formTitle: "新增公告",
    modalText: "",
    queryType: 1,
    queryTypeText: "",
    queryInput: "",
    tableData: [],
    headers: [
      { text: "业务员ID", value: "lftid", align: "center", sortable: false },
      { text: "级别", value: "saleLevel", align: "center", sortable: false },
      { text: "姓名", value: "realName", align: "center", sortable: false },
      { text: "微信昵称", value: "nickname", align: "center", sortable: false },
      { text: "电话号码", value: "telphone", sortable: false, align: "center" },
      {
        text: "直属上级ID",
        value: "superid",
        align: "center",
        sortable: false
      },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    editedIndex: -1,
    editedItem: {
      keyword: "",
      noticeType: "",
      content: "",
      isValid: false
    },
    defaultItem: {
      lftid: "",
      realName: "",
      telphone: "",
      saleLevel: false,
      superId: ""
    },
    levelItems: [
      { text: "见习业务员", value: 1 },
      { text: "正式业务员", value: 2 },
      { text: "高级业务员", value: 3 },
      { text: "见习经理", value: 4 },
      { text: "正式经理", value: 5 },
      { text: "高级经理", value: 6 },
      { text: "见习总监", value: 7 },
      { text: "正式总监", value: 8 },
      { text: "高级总监", value: 9 }
    ]
  }),
  mounted() {
    this.getSalesmanList(this.limit, this.offset);
  },
  created() {
    // this.initialize();
  },
  computed: {},
  methods: {
    getSalesmanList(limit, offset) {
      salesman.getSalesmanList.r({ limit, offset }).then(({ data }) => {
        if (data.result === 0) {
          console.log(data);
          this.tableData = data.data.dataList;
          this.pagination.pageCount = data.data.totalCount
            ? Math.ceil(data.data.totalCount / this.limit)
            : 1;
        } else {
        }
      });
    },
    addSalesman(params) {
      salesman.addSalesman.r(params).then(({ data }) => {
        this.dialog = false;
        $Vue.$emit('toggleSnackbar' ,{ text: data.message });
      });
    },
    deleteSalesman(params) {
      salesman.deleteSalesman.r({ ...params, isValid: 0 }).then(({ data }) => {
        $Vue.$emit('toggleSnackbar',{ text: data.message });
        
        console.log(data);
        this.modal = false;
        this.getSalesmanList(this.limit, this.offset);
      });
    },
    editSalesman(params) {
      salesman.editSalesman.r(params).then(({ data }) => {
        this.dialog = false;
        this.getSalesmanList(this.limit, this.offset);
        $Vue.$emit('toggleSnackbar',{ text: data.message });
      });
    },
    initialize() {
      this.tableData = [
        {
          keyword: "游戏公告",
          noticeType: "红中麻将",
          content:
            "需要把某种模式匹配到的所有路由，r 组件，对于所有 ID 各不相来渲染。",
          isValid: false,
          createTime: "2018-4-19"
        },
        {
          keyword: "钻石大赠送",
          noticeType: "俱乐部公告",
          content: "『路径参数』使用冒号 : 标记。当可以更新 User",
          isValid: true,
          createTime: "2018-4-19"
        }
      ];
    },
    edit(item) {
      this.editedIndex = this.tableData.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
      this.formTitle = "编辑业务员信息";
    },
    del(item) {
      this.editedItem = Object.assign({}, item);
      this.modal = true;
      this.modalText = "确认移除该业务员吗?";
    },
    add() {
      this.editedItem = Object.assign({}, this.defaultItem);
      this.dialog = true;
      this.formTitle = "新增业务员";
    },
    confirmDialog() {
      if (this.formTitle === "新增业务员") {
        this.addSalesman(this.editedItem);
      } else {
        this.editSalesman(this.editedItem);
      }
    },
    confirmModel() {
      this.deleteSalesman(this.editedItem);
    },
    pageChange(page) {
      // this.getSalesmanList(this.limit, (page - 1) * this.limit);
    },
    search() {}
  }
};
</script>

<style lang="less" scoped>
</style>

